<!DOCTYPE html>
<html>
<head>
    <!-- Vue 2 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <!-- 加载动画CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"  rel="stylesheet">
    <style>
        .chat-container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
        }
        .message-input {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        input[type="text"] {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 10px 20px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .chat-messages {
            min-height: 400px;
            max-height: 60vh;
            overflow-y: auto;
            border: 1px solid #eee;
            padding: 15px;
            border-radius: 4px;
        }
        .message-item {
            margin: 10px 0;
            padding: 10px;
            border-radius: 4px;
        }
        .user-message {
            background: #f0f8ff;
            margin-left: 20%;
            border: 1px solid #cce5ff;
        }
        .ai-message {
            background: #f8f9fa;
            margin-right: 20%;
            border: 1px solid #e9ecef;
        }
        .loading {
            display: inline-block;
            margin-left: 10px;
        }
        .loading i {
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .error {
            color: #dc3545;
            padding: 10px;
            background: #f8d7da;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="chat-container">
        <div class="message-input">
            <input
                    type="text"
                    v-model="message"
                    placeholder="输入消息..."
                    @keyup.enter="sendMessage"
                    :disabled="isLoading"
            >
            <button @click="sendMessage" :disabled="isLoading">
                发送
                <span class="loading" v-if="isLoading">
                        <i class="fas fa-spinner"></i>
                    </span>
            </button>
        </div>

        <div class="error" v-if="errorMsg">
            {{ errorMsg }}
        </div>

        <div class="chat-messages">
            <div
                    v-for="(msg, index) in messages"
                    :key="index"
                    class="message-item"
                    :class="msg.type  === 'user' ? 'user-message' : 'ai-message'"
            >
                <strong>{{ msg.type  === 'user' ? 'You' : 'AI' }}:</strong>
                <span v-html="msg.content.replace(/\n/g,  '<br>')"></span>
            </div>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: '',
            isLoading: false,
            errorMsg: '',
            messages: [],
            eventSource: null
        },
        methods: {
            sendMessage() {
                if (!this.message.trim()  || this.isLoading)  return;

                // 初始化状态
                this.isLoading  = true;
                this.errorMsg  = '';

                // 添加用户消息
                this.messages.push({
                    type: 'user',
                    content: this.message
                });

                // 创建SSE连接
                this.setupSSE();

                // 清空输入框
                this.message  = '';
            },
            setupSSE() {
                // 关闭已有连接
                if (this.eventSource)  {
                    this.eventSource.close();
                }

                // 初始化AI消息容器
                let aiResponse = {
                    type: 'ai',
                    content: ''
                };
                this.messages.push(aiResponse);

                // 创建EventSource连接
                const url = `http://localhost:8080/stream2?message=${encodeURIComponent(this.messages[this.messages.length  - 2].content)}`;
                this.eventSource  = new EventSource(url);

                // 消息接收处理
                this.eventSource.onmessage  = (e) => {
                    if (e.data  === '[DONE]') return;

                    // 实时追加内容
                    aiResponse.content  += e.data;
                    this.$forceUpdate(); // 强制更新视图
                };

                // 自定义事件处理
                this.eventSource.addEventListener('[END]',  () => {
                    this.isLoading  = false;
                    this.eventSource.close();
                });

                this.eventSource.addEventListener('[ERROR]',  (e) => {
                    this.errorMsg  = `错误: ${e.data}`;
                    this.isLoading  = false;
                    this.eventSource.close();
                });

                // 错误处理
                this.eventSource.onerror  = (e) => {
                    if (e.eventPhase  === EventSource.CLOSED) {
                        this.errorMsg  = '连接异常关闭';
                    } else {
                        this.errorMsg  = '连接错误';
                    }
                    this.isLoading  = false;
                };
            }
        },
        beforeDestroy() {
            // 组件销毁时关闭连接
            if (this.eventSource)  {
                this.eventSource.close();
            }
        }
    });
</script>
</body>
</html>
